<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 用户实名认证表单区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="6" lg="6">
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4>修改支付宝账号</h4>
                        </div>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
                        :label-width="90">
                            <FormItem label="支付宝号" prop="uaAlipay">
                                <Input v-model="formValidate.uaAlipay" placeholder="请输入支付宝账号" />
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                            </FormItem>
                        </Form>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

export default {
    name: 'updateAlipay',
    data() {
        return {
            formValidate: {
                uaAlipay: '',
            },
            ruleValidate: {
                uaAlipay: [
                    { required: true, message: '支付宝账号不能为空', trigger: 'blur' },
                ],
            },
        }
    },
    created() {
        this.findByUserId()
    },
    methods: {
        // 根据用户id查询该用户认证信息
        findByUserId() {
            this.$axios({
                url: 'userAuth/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.formValidate.uaAlipay = res.data.object.uaAlipay
                }
            }).catch(error => {
                console.log(error)
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userAuth/updateAlipay/',
                        method: 'get',
                        params: {
                            uaUid: JSON.parse(localStorage.getItem('user')).uId,
                            uaAlipay: this.formValidate.uaAlipay,
                        },
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.$router.push({ path: '/userHome' })
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    this.$Message.error('Fail!')
                }
            })
        },
        handleReset(name) {
            this.$refs[name].resetFields()
        },
    },
}

</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.file-upload {
    width: 176px;
    height: 32px;
    position: relative;
    overflow: hidden;
    border: 1px solid #dcdee2;
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    color: #515a6e;
    text-align: center;
    line-height: 26px;
    margin: 0 0 auto auto;
}
.file-upload-input {
    background-color: transparent;
    opacity: 0;
    position: absolute;
    width: 176px;
    height: 32px;
    top: 0px;
    right: 0px;
    cursor: pointer;
}
.userAuth-title {
    text-align: center;
    margin-bottom: 50px;
}
</style>
